<template>
    <div class="searchBar">

        <el-button type="success" @click="onAddRole">新增</el-button>
    </div>
    <div>
        <el-table :data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)" style="width: 100%"
            max-height="250">
            <el-table-column prop="roleName" label="角色" />
            <el-table-column prop="roleLevel" label="权限">
                <template #default="scope">
                    <span v-if="scope.row.roleLevel == 1">可编辑用户信息</span>
                    <span v-if="scope.row.roleLevel == 2">禁止编辑用户信息</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="300">
                <template #default="scope">
                    <el-button type="primary" size="small" @click.prevent="onUpdateRole(scope.row)">修改</el-button>
                    <el-button type="danger" size="small" @click.prevent="onDeleteRole(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage" :page-size="pagesize" layout="prev, pager, next, jumper"
            :total="tableData.length" v-if="(tableData.length != 0)">
        </el-pagination>
    </div>
    <addRole :addRoleShow="addRoleShow" @closeAddRole="closeAddRole" :role="roles"/>

    <updateRole :updateRoleShow="updateRoleShow" @closeUpdateRole="closeUpdateRole" :role="roles" :roleInfo="updateRoleValue" />
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'
import { getUserAllRoles,deleteRole } from '@/api/role'
import addRole from './components/addRole.vue'
import updateRole from './components/updateRole.vue'


const tableData: any = ref([])

//获取角色
let roles: any = ref([]);

const getRoles =async () => {
    roles.value = (await getUserAllRoles()).data.roles
    tableData.value= roles.value
    console.log("roles", roles)
}

onMounted(async () => {
    getRoles()
})


//分页
const pagesize = ref(4)//每页多少个
const handleSizeChange = (size: any) => {
    // console.log(size);     
    pagesize.value = size;
    // console.log(pagesize.value); //每页下拉显示数据
}

const currentPage = ref(1)//默认第几页
const handleCurrentChange = (current: any) => {
    // console.log(current); 
    currentPage.value = current
    // console.log(currentPage.value); //点击第几页
}


const addRoleShow = ref(false)

const updateRoleShow = ref(false)


const updateRoleValue = ref()


const onAddRole = () => {
    addRoleShow.value = true
}




const onUpdateRole = (roleInfo: any) => {
    updateRoleValue.value = roleInfo
    updateRoleShow.value = true
}

const onDeleteRole = async (roleInfo: any) => {
    ElMessageBox.confirm(
        '确定要删除' + roleInfo.roleName + '这个角色?',
        '警告',
        {
            confirmButtonText: '确定删除',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(async () => {
        const loading = ElLoading.service({
            lock: true,
            text: 'Loading',
            background: 'rgba(0, 0, 0, 0.7)'
        })
        try {
            const deleteRoleResult: any = await deleteRole(roleInfo.id)
            console.log("deleteRoleResult", deleteRoleResult)
            if (deleteRoleResult.success) {
                ElMessage({
                    type: 'info',
                    message: deleteRoleResult.info.msg
                })
                getRoles()
            } else {
                ElMessage({
                    type: 'warning',
                    message: deleteRoleResult.info.msg
                })
            }
            loading.close()
        } catch (error) {
            console.log(error)
            loading.close()
        }
    }).catch((error) => {
        console.log( error)
    })
}


const closeAddRole = (value: boolean) => {
    addRoleShow.value = false;
    getRoles()
}

const closeUpdateRole = (value: boolean) => {
    updateRoleShow.value = false;
    getRoles()
}



</script>

<style scoped>
.searchBar {
    margin-top: 20px;
    margin-bottom: 20px;
}

.demo-pagination-block {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>